<template>
  <div class="singerPage">
    <el-carousel
      trigger="click"
      height="570px"
      :autoplay="false"
      indicator-position="none"
      v-if="artist"
    >
      <el-carousel-item>
        <div
          class="box"
          :style="{
            background:
              'url(' + artist.cover + ') no-repeat -200px  center / cover',
          }"
        >
          <h3 class="name">
            {{ artist.name }}
            <div class="desc">
              {{ artist.briefDesc }}
            </div>
          </h3>
          <div class="playAll">
            <svg
              t="1648291084739"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1594"
              width="200"
              height="200"
              @click.stop="playAll(songs)"
            >
              <path
                d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m196.546667 500.493333l-266.666667 176A37.333333 37.333333 0 0 1 384 688V336.033333a37.333333 37.333333 0 0 1 57.893333-31.16l266.666667 176a37.333333 37.333333 0 0 1 0 62.32z"
                fill="#dbdbdb"
                p-id="1595"
                class="fingerCursor"
              ></path>
            </svg>
          </div>
          <ul class="songlist">
            <song-item
              v-for="(item, index) in songs"
              :key="index"
              :index="index"
              :song="item"
              :noDeleteSong="true"
              :control="true"
            ></song-item>
          </ul>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import axios from "axios";
import songItem from "../../components/songItem/index.vue";
import songListItem from "../../components/songListItem/index.vue";
import store from "../../store";

export default {
  name: "singerPage",

  data() {
    return {
      songs: null,
      artist: null,
    };
  },

  components: {
    songItem,
    songListItem,
  },

  created() {
    // // 获取歌手专辑
    // axios
    //   .get(
    //     "https://apis.netstart.cn/music/artist/album?id=" +
    //       this.$route.params.id
    //   )
    //   .then((res) => {
    //     this.hotAlbums = res.data.hotAlbums;
    //     // console.log(res.data);
    //   });

    // 获取歌手详情
    axios
      .get(
        "https://apis.netstart.cn/music/artist/detail?id=" +
          this.$route.params.id
      )
      .then((res) => {
        this.artist = res.data.data.artist;
        // 歌手50首
        axios
          .get(
            "https://apis.netstart.cn/music/artist/songs?limit=50&id=" +
              this.$route.params.id
          )
          .then((res) => {
            res.data.songs.forEach((item) => {
              item.picUrl = this.artist.cover;
            });
            this.songs = res.data.songs;
          });
      });
  },

  methods: {
    playAll(songs) {
      console.log(songs);
      store.commit("upload_playing_list", songs);
    },
  },
};
</script>

<style lang="scss" scoped>
.singerPage {
  width: 100%;
  height: 100%;
}
.el-carousel__item {
  padding: 20px;

  .box {
    background-color: rgba($color: #ffffff, $alpha: 0.2);
    height: 100%;
    border-radius: 10px;
    position: relative;

    .name {
      color: #f9d1d1;
      font-size: 100px;
      text-align: right;
      padding-top: 20px;
      padding-right: 40px;
      margin: 0;
      font-weight: bold;
      position: relative;
      line-height: 300px;

      .desc {
        position: absolute;
        bottom: -10px;
        right: 0;
        font-size: 12px;
        text-align: left;
        width: 500px;
        height: 100px;
        overflow-y: auto;
        text-indent: 1em;
        line-height: normal;
        background-color: rgba($color: #000000, $alpha: 0.4);
        color: #ffffff;
        border-radius: 10px;

        &::-webkit-scrollbar {
          /*滚动条整体样式*/
          width: 1px;
        }

        &::-webkit-scrollbar-thumb {
          /*滚动条里面小方块*/
          border-radius: 10px;
          // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          // background-color: #f90;
          // background-image: -webkit-linear-gradient(
          //     45deg,
          //     rgba(255, 255, 255, 0.2) 25%,
          //     transparent 25%,
          //     transparent 50%,
          //     rgba(255, 255, 255, 0.2) 50%,
          //     rgba(255, 255, 255, 0.2) 75%,
          //     transparent 75%,
          //     transparent
          // );
        }

        &::-webkit-scrollbar-track {
          /*滚动条里面轨道*/
          // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
          border-radius: 10px;
          // background: #ededed;
        }
      }
    }

    .playAll {
      position: absolute;
      bottom: 130px;
      right: 10px;
      width: 30px;
      height: 30px;
      svg {
        width: 100%;
        height: 100%;
      }
    }

    .songlist {
      position: absolute;
      right: 50px;
      bottom: 0;
      width: 400px;
      height: 180px;
      background-color: rgba($color: #ffffff, $alpha: 0.4);
      padding: 20px;
      border-radius: 10px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 1px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        // background-color: #f90;
        // background-image: -webkit-linear-gradient(
        //     45deg,
        //     rgba(255, 255, 255, 0.2) 25%,
        //     transparent 25%,
        //     transparent 50%,
        //     rgba(255, 255, 255, 0.2) 50%,
        //     rgba(255, 255, 255, 0.2) 75%,
        //     transparent 75%,
        //     transparent
        // );
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        // background: #ededed;
      }
    }
  }
}
</style>